<!-- <!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命时间线</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .life-time-line {
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            background-color: #f5f5f5;
        }

        .test {
            width: 50%;
            height: 70%;
            text-align: center;
            background-image: url(https://golfjimmy.com.cn/studentSystem/listImage/img2.jpg);
        }

        .test::after {
            content: "";
            width: 100px;
            height: 100px;
            /* 目标纯色 */
            background: skyblue;
            /* 初始不透明 */
            opacity: 1;
        }
    </style>
    <script>

    </script>
</head>

<body>
    <div class="life-time-line">
        <div class="test ::after">
            aaaaa
        </div>

    </div>

</body>

</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Transition Example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .gradient-box {
            width: 300px;
            height: 200px;
            /* background-image: url('https://golfjimmy.com.cn/studentSystem/listImage/img2.jpg');  */
            background-image: linear-gradient(135deg,
                    #f5f5f5 20%,
                    #f9fad4 20%, #f9fad4 40%,
                    #f5f5f5 40%, #f5f5f5 60%,
                    #f8eaf0 60%, #f8eaf0 80%,
                    #f5f5f5 80%, #f5f5f5 100%);
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            cursor: pointer; /* 添加鼠标悬停效果 */
        }

        /* 纯色覆盖层 */
        .gradient-box::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: skyblue; /* 目标纯色 */
            opacity: 0; /* 初始透明 */
            transition: opacity 2s ease; /* 平滑过渡效果 */
        }

        /* 鼠标悬停时触发渐变 */
        .gradient-box:hover::after {
            opacity: 1; /* 完全显示纯色 */
        }
    </style>
</head>
<body>

    <!-- DOM 元素 -->
    <div class="gradient-box">4378901242378901612343</div>

</body>
</html>